<!doctype html>
<html lang="en">
<head>
  <title>Media History</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="chrome://resources/css/tabs.css">
  <style>
    html,
    body {
      font-family: 'Roboto', 'Noto', sans-serif;
      font-size: 14px;
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    tabbox {
      padding-top: 10px;
    }

    tab {
      -webkit-user-select: none;
    }

    body tabpanels {
      box-shadow: none;
    }

    tabpanel {
      padding: 10px;
    }

    h1 {
      margin-top: 10px;
    }

    button {
      margin-bottom: 20px;
    }

    table {
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    table td,
    table th {
      border: 1px solid #777;
      padding-inline-end: 4px;
      padding-inline-start: 4px;
    }

    table th {
      background: rgb(224, 236, 255);
      cursor: pointer;
      padding-bottom: 4px;
      padding-inline-end: 4px;
      padding-top: 4px;
      white-space: nowrap;
    }

    .name-cell {
      background-color: rgba(230, 230, 230, 0.5);
    }

    th.sort-column {
      padding-inline-end: 16px;
    }

    th.sort-column::after {
      content: '▲';
      position: absolute;
    }

    th[sort-reverse].sort-column::after {
      content: '▼';
      position: absolute;
    }
  </style>
</head>
<body>
  <tabbox id="tabbox">
    <tabs>
      <tab id="stats">Stats</tab>
      <tab id="origins">Origins</tab>
      <tab id="playbacks">Playbacks</tab>
      <tab id="sessions">Sessions</tab>
    </tabs>
    <tabpanels>
      <tabpanel>
        <h1>Media History</h1>
        <button class="copy-all-to-clipboard">Copy all to clipboard</button>
        <table>
          <thead>
            <tr id="stats-table-header">
              <th>
                Table Name
              </th>
              <th>
                Row Count
              </th>
            </tr>
          </thead>
          <tbody id="stats-table-body">
          </tbody>
        </table>
      </tabpanel>
      <tabpanel>
        <h1>Origins</h1>
        <button class="copy-all-to-clipboard">Copy all to clipboard</button>
        <table id="origins-table">
          <thead>
            <tr>
              <th sort-key="origin">
                Origin
              </th>
              <th sort-key="lastUpdatedTime">
                Last Updated
              </th>
              <th sort-key="cachedAudioVideoWatchtime" class="sort-column" sort-reverse>
                Audio + Video Watchtime (secs, cached)
              </th>
              <th sort-key="actualAudioVideoWatchtime">
                Audio + Video Watchtime (secs, actual)
              </th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </tabpanel>
      <tabpanel>
        <h1>Playbacks</h1>
        <p>
          The playbacks table stores playbacks that happened on a page. These
          can be of any type and there is one playback stored for each player
          per page.
        </p>
        <button class="copy-all-to-clipboard">Copy all to clipboard</button>
        <table id="playbacks-table">
          <thead>
            <tr>
              <th sort-key="url">
                URL
              </th>
              <th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
                Last Updated
              </th>
              <th sort-key="hasAudio">
                Has Audio
              </th>
              <th sort-key="hasVideo">
                Has Video
              </th>
              <th sort-key="watchtime">
                Watchtime (secs)
              </th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </tabpanel>
      <tabpanel>
        <h1>Sessions</h1>
        <p>
          The sessions table stores media sessions that had media playback that
          had both an audio and video track. There is only one session recorded
          for the lifetime of the page.
        </p>
        <button class="copy-all-to-clipboard">Copy all to clipboard</button>
        <table id="sessions-table">
          <thead>
            <tr>
              <th sort-key="url">
                URL
              </th>
              <th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
                Last Updated
              </th>
              <th sort-key="position">
                Position (secs)
              </th>
              <th sort-key="duration">
                Duration (secs)
              </th>
              <th sort-key="metadata.title">
                Title
              </th>
              <th sort-key="metadata.artist">
                Artist
              </th>
              <th sort-key="metadata.album">
                Album
              </th>
              <th sort-key="metadata.sourceTitle">
                Source Title
              </th>
              <th data-key="artwork">
                Artwork
              </th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </tabpanel>
    </tabpanels>
  </tabbox>

  <template id="data-row">
    <tr>
      <td class="origin-cell"></td>
      <td class="last-updated-cell"></td>
      <td class="cached-watchtime-cell"></td>
      <td class="actual-watchtime-cell"></td>
    </tr>
  </template>
  <template id="stats-row">
    <tr>
      <td class="name-cell"></td>
      <td></td>
    </tr>
  </template>
  <script type="module" src="media_history.js"></script>
</body>
</html>
